<script setup lang="ts">
import {getAppointment} from "@/api/interface/reuqest";
import {onMounted, ref, watch, watchEffect} from "vue";
import {push} from "echarts/types/src/component/dataZoom/history";
import {handleCurrentChange} from "element-plus/es/components/tree/src/model/util";
import {pageSize} from "@/views/consult/consultInter";

//接受父组件数据
const props = defineProps(['list'])
// console.log(props.list)

//删除、编辑操作
const handleClick = () => {
    console.log('click')
}

let tableData = ref([])

let total = ref<pageSize>()
let currentPage = ref<number>()

//页面展示
// let pageSize =ref(props.list)
let pageSize ={}
watchEffect(()=>{
    let pageSize =ref(props.list)
    console.log(pageSize.value)
    getAppointment(pageSize.value).then((item) => {
        // console.log(item)
        if (item.code === 200) {
            tableData.value = item.rows.map((value, index) => {
                // console.log(value)
                let obj = {
                    index: index+1,
                    name: value?.psyStudent?.name,
                    psyClass: value?.psyClass?.name,
                    stuNmu: value?.psyStudent?.stuNum,
                    phone: value?.psyStudent?.phoneNumber,
                    psyTeacher: value?.psyTeacher?.name,
                    content: value?.content,
                    scheduling: '',
                    mode: value?.mode,
                    modeLabel: '个人预约',
                    duration: value?.duration,
                    state: value?.psyStudent?.status,
                    goStatus: '',
                    status: value?.status,
                }
                return obj
            })
            total = item.total
            // console.log(total)
        }
    })
})
//监听页面分页器
function handleCurrentChange(newPage){
    // console.log(newPage)
    pageSize = {
        pageNum: newPage,
        pageSize: 10,
        endTime: props.list.endTime,
        startTime:  props.list.startTime,
        psyClass:  props.list.psyClass,
        statusType:  props.list.statusType,
        stuName: props.list.stuName,
        stuNum:  props.list.stuNum,
        teacherName:  props.list.teacherName
    }
    getAppointment(pageSize).then((item) => {
        // console.log(item)
        if (item.code === 200) {
            tableData.value = item.rows.map((value, index) => {
                // console.log(value)
                let obj = {
                    index: index+1,
                    name: value?.psyStudent?.name,
                    psyClass: value?.psyClass?.name,
                    stuNmu: value?.psyStudent?.stuNum,
                    phone: value?.psyStudent?.phoneNumber,
                    psyTeacher: value?.psyTeacher?.name,
                    content: value?.content,
                    scheduling: '',
                    mode: value?.mode,
                    modeLabel: '个人预约',
                    duration: value?.duration,
                    state: value?.psyStudent?.status,
                    goStatus: '',
                    status: value?.status,
                }
                return obj
            })
            total = item.total
        }
    })
}

onMounted(async ()=>{
    // await getAppointment(pageSize).then((item) => {
    //     // console.log(item)
    //     if (item.code === 200) {
    //         tableData.value = item.rows.map((value, index) => {
    //             // console.log(value)
    //             let obj = {
    //                 index: index+1,
    //                 name: value?.psyStudent?.name,
    //                 psyClass: value?.psyClass?.name,
    //                 stuNmu: value?.psyStudent?.stuNum,
    //                 phone: value?.psyStudent?.phoneNumber,
    //                 psyTeacher: value?.psyTeacher?.name,
    //                 content: value?.content,
    //                 scheduling: '',
    //                 mode: value?.mode,
    //                 modeLabel: '个人预约',
    //                 duration: value?.duration,
    //                 state: value?.psyStudent?.status,
    //                 goStatus: '',
    //                 status: value?.status,
    //             }
    //             return obj
    //         })
    //         total = item.total
    //         // console.log(total)
    //     }
    // })
})

</script>

<template>
    <div style="position: relative">
        <p>统计：&nbsp;&nbsp;咨询时长：103小时36分钟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;咨询次数：{{ total }}</p>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="index" label="序号" width="80" align="center"/>
            <el-table-column prop="name" label="学生姓名" width="120" align="center"/>
            <el-table-column prop="psyClass" label="班级" width="120" align="center"/>
            <el-table-column prop="stuNmu" label="学号" width="120" align="center"/>
            <el-table-column prop="phone" label="手机号" width="120" align="center"/>
            <el-table-column prop="psyTeacher" label="咨询师" width="120" align="center"/>
            <el-table-column prop="content" label="问题描述" width="120" align="center"/>
            <el-table-column prop="scheduling" label="咨询时间" width="120" align="center"/>
            <el-table-column prop="mode" label="咨询方式" width="120" align="center"/>
            <el-table-column prop="modeLabel" label="咨询类型" width="120" align="center"/>
            <el-table-column prop="duration" label="咨询时长" width="120" align="center"/>
            <el-table-column prop="state" label="禁用剩余时长" width="120" align="center"/>
            <el-table-column prop="goStatus" label="赴约状态" width="120" align="center"/>
            <el-table-column prop="status" label="咨询状态" width="120" align="center"/>
            <el-table-column fixed="right" label="操作" width="200">
                <template #default>
                    <el-button link type="primary" size="small" @click="handleClick">
                        查看
                    </el-button>
                    <el-button link type="primary" size="small">禁用</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total='total' :current-page.sync="currentPage" @current-change="handleCurrentChange" class="page"/>
    </div>
</template>

<style scoped lang="scss">
p {
    font-size: 14px;
    //font-weight: 100;
}

.page {
    //margin-top: 20px;
    position: absolute;
    //top: 20px;
    bottom: -50px;
    right: 10px;
}

</style>
